<template>
  <!-- van-popup:只是单纯提供弹框
   van-action-sheet:提供带标题的底部弹框
      v-model:是否显示
      title:标题
基本弹框创建
1:创建一个回复评论弹框组件
2:在父组件使用
3:点击回复打开弹框
4:完成布局
 -->
  <van-action-sheet v-model="isShow" title="发表回复" @closed="closedEvent">
    <div class="item">
      <img class="avatar" :src="item.aut_photo" alt="" />
      <div class="middle">
        <div class="name">{{ item.aut_name }}</div>
        <div class="content">{{ item.content }}</div>
        <div class="time">
          <span>{{ item.pubdate | formatDate }}</span>
        </div>
      </div>
    </div>
    <van-divider>回复列表</van-divider>
    <!-- 上拉加载
            van-list
               v-model
               finished
               finished-text
               @load
                   发送请求调用接口
                   将拿到的数据累加存储
                   将v-model的值改为false
                   将请求下一页参数调整
                   判断是否加载完成,如果完成,将finished的值改为true
     -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="load"
    >
      <div class="item" v-for="(i, index) in list" :key="index">
        <img class="avatar" :src="i.aut_photo" alt="" />
        <div class="middle">
          <div class="name">{{ i.aut_name }}</div>
          <div class="content">{{ i.content }}</div>
          <div class="time">
            <span>{{ i.pubdate | formatDate }}</span>
          </div>
        </div>
      </div>
    </van-list>

    <van-field placeholder="请输入评论内容" v-model.trim="content">
      <template #button>
        <van-button type="info" size="small" @click="submit">发布</van-button>
      </template>
    </van-field>
  </van-action-sheet>
</template>
<script>
import { comments, commentsPost } from '@/api/article'
export default {
  data () {
    return {
      isShow: false,
      item: '', // 当前项评论数据
      loading: false,
      finished: false,
      list: [],
      offset: null,
      content: ''
    }
  },
  methods: {
    async load () {
      // 调用获取回复评论的接口
      const res = await comments({
        type: 'c',
        source: this.item.com_id, // 评论id
        offset: this.offset,
        limit: 10
      })
      this.list.push(...res.data.data.results)
      this.loading = false
      this.offset = res.data.data.last_id
      if (res.data.data.last_id === res.data.data.end_id) {
        this.finished = true
      }
      console.log('回复评论', res)
    },
    closedEvent () {
      // 重置当前组件
      /*
    父子传值
       父传子属性值
           子组件标签  :属性名="值"
           子组件内
              props:['属性名']
       子传父(子触发父方法)
          子组件标签   @子组件事情名='父组件事件'
          子组件内:this.$emit('子组件事情名',实参)
    */

      this.$emit('reset')
    },
    // 发布回复评论
    async submit () {
      if (this.content === '') {
        this.$toast.fail('请先输入内容')
        return
      }
      const res = await commentsPost({
        target: this.item.com_id,
        content: this.content,
        art_id: this.$route.query.id
      })
      this.content = ''
      this.$toast.success('回复评论成功')
      this.list.unshift(res.data.data.new_obj)
      // 让回复评论总条数+1
      this.item.reply_count++
    }
  }
}
</script>
<style lang="less" scoped>
.van-field {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>
